<!-- 艺人-订单管理 -->
<template>
	<view class="orderManage">
		<!-- tabs -->
		<u-tabs :list="list1" lineWidth="64rpx" lineHeight="8rpx" activeStyle="color: #E27C8A;fontSize: 32rpx"
			lineColor="#E27C8A" inactiveStyle="color: #0F0D21;fontSize: 32rpx" @click="click"></u-tabs>

		<view class="content">
			<ItemList class="item" v-for="(res,index) in listData" :key="index" :data="res" @init="init"></ItemList>
			
			<uni-load-more  v-if="listData.length > 0" :status="loadingType"></uni-load-more>
			
			<noData v-if="listData.length < 1"></noData>
			
		</view>
	</view>
</template>

<script>
	// 页面组件
	import TabsActive from './components/tabsActive.vue'
	import ItemList from './components/listItem.vue'

	//请求api
	import {
		postOrderListApi, // 订单管理列表
	} from '@/api/artistCentre.js'

	export default {
		components: {
			TabsActive,
			ItemList
		},
		data() {
			return {
				list1: [{
						name: '全部',
					},
					{
						name: '待付款',
					}, {
						name: '待服务'
					}, {
						name: '进行中'
					},
					{
						name: '已完成'
					},
					{
						name: '已退款'
					},
					{
						name: '已取消'
					},
					{
						name: '已评价'
					},
					{
						name: '待接单'
					}
				],

				listData: [], // 订单列表
				current: 1, // 当前页
				status: '', // 订单分类
				
				loadingType: 'loading', // 是否显示更多

			};
		},
		onShow() {
			this.init()
		},

		//滑动到底部
		onReachBottom() {
			this.current++
			this.queryList()
			console.log('滑动到底部');
		},
		methods: {
			/**
			 * 初始化
			 */
			init() {
				// 当前页恢复0
				this.current = 1

				// 数据容器清空
				this.listData = []
				
				// loading状态
				this.loadingType = 'loading'

				this.queryList()
				
				console.log('刷新页面');

			},

			/**
			 * 查询订单列表
			 */
			queryList() {
				// 动态设置status
				let params = {
					pageNum: this.current, // 当前页
					pageSize: 10, // 一页几条
				}
				if (this.status !== '') {
					params.status = this.status
				}

				this.postOrderList(params)
			},


			/**
			 * 请求订单列表
			 */
			async postOrderList(params) {
				
				// 处理中
				uni.showLoading({
					title: '正在处理中'
				});
				
				const res = await postOrderListApi(params);
				
				// 关闭处理中
				uni.hideLoading();
				

				// 报错提示
				if (res.code !== 200) {
					uni.showToast({
						duration: 3000,
						title: res.msg,
						icon: 'none'
					})
				}
				
				if(res.rows.length < 10){
					this.loadingType = 'noMore'
				}

				// 订单列表赋值
				this.listData.push(...res.rows)

				console.log(res, '请求订单列表');
			},



			/**
			 * tabs点击事件
			 */
			async click(item) {
				let num = 0

				switch (item.name) {
					case '全部':
						num = '';
						break;
					case '待付款':
						num = 0;
						break;
					case '待服务':
						num = 1;
						break;
					case '进行中':
						num = 2;
						break;
					case '已完成':
						num = 3;
						break;
					case '已退款':
						num = 4;
						break;
					case '已取消':
						num = 5;
						break;
					case '已评价':
						num = 6;
						break;
					case '待接单':
						num = 7;
						break;
				}

				this.status = num
				this.init()
			},





		},
	}
</script>

<style>
	page {
		height: 100%;
	}
</style>
<style lang="less" scoped>
	.orderManage {
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(202, 191, 192, 0) 100%);

		.content {
			#padding(36rpx);

			box-sizing: border-box;
			
			/deep/ .no-data-box{
				&::after{
					height: 0;
				}
			}
		}


	}
</style>